<template>
    <div class="index">
        <div class="content">
            <div class="form-style">
                <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="账号：" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { loginInterface } from "@/api/index.js"

import { mapActions } from "vuex"
import { setCookie, getCookie } from "./cookie.js"

export default {
    name: "LoginPage",
    data() {
        // 账号输入框校验
        var validatename = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('账号不能为空'));
            } else {
                return callback();
            }
        };
        // 密码输入框校验
        var validatePass = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('密码不能为空'));
            } else {
                return callback();
            }
        };
        return {
            rules: {
                username: [
                    { validator: validatename, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
            },
            form: {
                username: '',
                password: ''
            }
        }
    },
    mounted() {

    },
    methods: {
        ...mapActions("Userindex", ["asyncuserefunction", "loadUserInfo"]),

        // 点击登录按钮调用接口判断是否是用户
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {

                if (valid) {
                    loginInterface(this.form).then(res => {
                        // 成功失败提示框
                        if (res.code == 200) {
                            this.$router.push("/")

                            setCookie("token", res.token, 1000 * 60 * 60 * 24 * 2)
                            setCookie("username", this.form.username)
                            this.loadUserInfo(res.token)

                            this.$emit('loginApiFun')
                        } else {

                            this.$emit('stafTile', res)


                        }
                    })
                } else {
                    console.log('未输入账号或者密码');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="less" scoped>
.el-form-item /deep/ .el-form-item__content {
    width: 324px;
    margin-left: 0px !important;
}

.el-form-item {
    display: flex;
    flex-direction: column;
}

.index {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;

    .content {
        color: #fff;

        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-style {
        width: 452px;
        padding: 20px;

        .el-form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }


        /deep/.el-form-item__label {
            font-size: 22px;
            font-family: "思源黑体", "Microsoft YaHei";
            font-weight: 400;
            color: #FFFFFF;
            width: 80px !important;
        }

        /deep/.el-input__inner {
            height: 50px;
            background: #00184B !important;
            font-size: 22px !important;
            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
            font-weight: 400 !important;
            color: #ACE1FD !important;
            border: none;
        }

        /deep/.el-button {
            width: 100%;
            height: 50px;
            background: #003B9F;
            border: none;
            font-size: 22px !important;
            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
            font-weight: 400 !important;
            color: #ACE1FD !important;
            margin-top: 20px;
        }
    }
}
</style>